<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head th:include="template::head">

</head>
<body class="hold-transition sidebar-mini sidebar-collapse ng-cloak" ng-app="ESL" style="min-width: 1200px">
<div class="wrapper" ng-controller="role_manager">
  <!-- Navbar -->
    <header th:include="template::header"></header>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 >角色管理</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active" >角色管理</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-12">

          <!-- /.card -->

          <div class="card">
            <!-- /.card-header -->
            <div class="card-body ">
              <div class="">
                <input type="text" id="roleCode_search" ng-model="search.roleCode" th:placeholder="#{role_manager_roleCode}"/>
                <input type="text" id="roleName_search" ng-model="search.roleName" th:placeholder="#{role_manager_roleName}"/>
                <button ng-click="loadItems()" class="btn btn-sm btn-primary" th:text="#{action.search}">查询</button>
                <button ng-click="reset()" class="btn btn-sm btn-primary">重置</button>

              </div>
              <div class="table-responsive">
              <table id="tab1" class="table table-bordered table-hover table-condensed" >
                <thead>
                <tr>
                  <th><input type="checkbox"  ng-model="selectAll"   ng-change="changeAll($event)"/></th>
                  <th></th>
                  <th style="white-space: nowrap;"  ><i id="id_sort_icon_username" class="fa fa-fw fa-sort" ng-click="sortBy('username')"></i><span th:text="#{role_manager_roleCode}"></span></th>
                  <th style="white-space: nowrap;" ><i id="id_sort_icon_modifyTime" class="fa fa-fw fa-sort" ng-click="sortBy('modifyTime')"></i><span th:text="#{role_manager_roleName}"></span> </th>
                  <th style="white-space: nowrap;" ><i id="id_sort_icon_remark" class="fa fa-fw fa-sort" ng-click="sortBy('remark')"></i><span th:text="#{role_manager_description}"></span> </th>
                  <th style="white-space: nowrap;"  ><i id="id_sort_icon_role" class="fa fa-fw fa-sort" ng-click="sortBy('role')"></i><span th:text="#{role_manager_modifyTime}"></span></th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="role in roleList" ng-click="changeCurrents(role,$event)">

                  <td>
                    <label>
                    <input type="checkbox" value="{{role.id}}" ng-model="role.checked" name="checkbox" ng-click="changeCurrent(role,$event)"/>
                    </label>
                  </td>

                  <td>{{$index+1}}</td>
                  <td>{{role.roleCode}}</td>
                  <td>{{role.roleName}}</td>
                  <td>{{role.description}}</td>
                  <td>{{role.modifyTime|date:'yyyy/MM/dd HH:mm:ss'}}</td>
                </tr>
                </tbody>
              </table>
              </div>
              <!--page plugin-->
              <navigation th:include="template::page"></navigation>

              </div>

            </div>

            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      <!-- /.row -->
      <div class="modal fade" id="remove_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document" style="margin-top:300px;">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="id_remove_modal_title" th:text="#{sku.removeAlertMsg}"></h4>
              <input type="hidden" id="id_remove_modal_title_hidden" th:value="#{sku.removeAlertMsg}" />
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal" th:text="#{action.close}"></button>
              <button type="button" class="btn btn-primary" ng-click="deleteRole()" th:text="#{action.confirm}"></button>
            </div>
          </div>
        </div>
      </div>


      <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">

              <h4 class="modal-title" id="addModalLabel">
                编辑
              </h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
            </div>

            <div class="modal-body">
                <p ng-show="current.error" style="color:red">{{current.error}}</p>
                <p>
                  角&nbsp&nbsp色&nbsp&nbsp码：<input  type="text" ng-model="current.roleCode" ng-change="roleCodeChange()" ng-disabled="current.id" />
                  <span ng-show="!addCheckRoleCode()" style="color:red">请填写角色码</span>
                </p>

              <p>
                角&nbsp&nbsp色&nbsp&nbsp名：<input  type="text" ng-model="current.roleName" />
                <span ng-show="!addCheckRoleName()" style="color:red">请填写角色名</span>
              </p>

              <p>
                备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注：<textarea ng-model="current.description"></textarea>
              </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭
              </button>
              <button type="button" class="btn btn-primary" ng-disabled="!addCheckAll()" ng-click="addSubmit()">
                提交更改
              </button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer th:include="template::footer"></footer>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->


</body>
<navigation th:include="template::js"></navigation>
<script th:inline="javascript">


    var top_page=[[#{page.top_page}]]
    var previous_page= [[#{page.previous_page}]]
    var next_page= [[#{page.next_page}]]
    var tail_page=[[#{page.tail_page}]]
    var eslApp=angular.module('ESL',[])

    eslApp.controller('role_manager',function ($scope,$http) {
        $scope.search ={};
        $scope.roleList=[]
        $scope.menu={"role":true}
        $scope.current={};
        $scope.count = 0;//已选择数量

        $scope.addCheckRoleCode=function () {
            return $scope.current.roleCode
        }
        $scope.addCheckRoleName=function () {
            return $scope.current.roleName
        }
        $scope.addCheckAll=function () {

            return $scope.addCheckRoleCode()&&$scope.addCheckRoleName()&&!$scope.current.error
        }

        $scope.usernameChange=function () {
            $scope.current.error=null
        }

        /**
         新增/修改user提交
         */
        $scope.addSubmit=function () {
            $http({
                method:"post",
                url:"/role_rest/add_change_role",
                data:$scope.current,
                headers:{'Content-Type': 'application/json'}
            }).success(function (json) {
                if(json.cmd=="success"){
                    $scope.loadItems()
                    angular.element("#addModal").modal("hide");
                    alertSuccess()
                }else{
                    $scope.current.error=json.msg
                }

            }).error(function (json) {
                $scope.current.error=json.message
            })
        }

        //点击单个checkbox
        $scope.changeCurrent = function(current, $event) {
            // //计算已选数量 true加， false减
            $scope.count += current.checked ? 1 : -1;
            //判断是否全选，选数量等于数据长度为true
            $scope.selectAll = $scope.count=== $scope.roleList.length;
            //


            $event.stopPropagation();//阻止冒泡

        };

        //单击行选中
        $scope.changeCurrents = function(current, $event) {
            if(current.checked == undefined){
                current.checked = true;
            }else{
                current.checked = !current.checked;
            }
            $scope.changeCurrent(current, $event);
        };

//全选（取消全选
        $scope.changeAll = function($event) {
            angular.forEach($scope.roleList, function(item) {
                item.checked = $scope.selectAll;
            });
            $scope.count = $scope.selectAll ? $scope.roleList.length : 0;

        };





        $scope.gotoPage = function(page) {
            if(page!=0&&!page||page<0||page==$scope.pagination.number||page>=$scope.pagination.totalPages){
                return;
            }
            $scope.page = page;
            $scope.loadItems();
        }
        $scope.changeSize = function() {
            $scope.page =0
            $scope.loadItems();
        }


        pagingScope($scope,{roleCode:false,roleName:false})


        $scope.init=function (){
            $scope.loadItems()

        }

        $scope.loadItems = function(){
            $http({

                url:"/role_rest/listByPage",
                data:{page : $scope.page, size : $scope.size, sortStr : $scope.sort, sortAscOrDesc : $scope.sortAscOrDesc, 'searchObj' : JSON.stringify($scope.search)},
                method:"post",
                headers:{'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function(obj) {
                    var str = [];
                    for (var s in obj) {
                        str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                    }
                    return str.join("&");
                }
            }).success(function (json) {
                $scope.roleList = json.content;
                $scope.pagination = getPagination(json, $scope.page);
                $scope.selectAll=false;
            }).
            error(function (msg) {
                alert(msg.message)
            })

        }
        $scope.init()




        $scope.deleteRole=function () {

            $http({
                url:"/role_rest/delete_role",
                params:{"roleId":$scope.currentId},
            }).success(function (result) {
                angular.element("#remove_modal").modal("hide");
                $scope.loadItems()
                alertSuccess()

            }).
            error(function (msg) {
                angular.element("#remove_modal").modal("hide");
                alert(msg.message)
            })
        }




        $scope.openRemovePopup = function($event,role) {
            $event.stopPropagation()
            $scope.currentId=role.id;
            $("#id_remove_modal_title").html(($("#id_remove_modal_title_hidden").val() + ""));
            angular.element("#remove_modal").modal("show");

        }


        //
        $scope.openEdit = function($event,role) {
            $event.stopPropagation()
            if(role){
                $scope.current=angular.extend($scope.current,role);
                $scope.current.error=null
            }else{
                $scope.current={}
            }
            angular.element("#addModal").modal("show");

        }


        //重置查询
        $scope.reset=function () {
            $scope.search={};
        }

        $scope.stopPropagation=function ($event) {
            $event.stopPropagation()
        }

    });

</script>
</html>
